<template>
<div>

    <div class="xq">
      <el-container>
        <el-page-header @back="goBack"> </el-page-header>
        <el-header class="zt"> 传智健康 </el-header>
      </el-container>
    </div>

    <div class="loginClass" >
      <h1>登录界面</h1>
      <div class="dlA">
      <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-form-item label="账号" prop="email" >
          <el-input v-model="ruleForm.email" autofocus placeholder="请输入Email账号"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
          <el-input type="password" v-model="ruleForm.password" autocomplete="off" placeholder="请输入密码"></el-input>
      </el-form-item>
      <el-form-item label="确认密码" prop="passwordS">
          <el-input type="password" v-model="ruleForm.passwordS" autocomplete="off" placeholder="请再次输入密码"></el-input>
      </el-form-item>
      <el-form-item>
          <el-button class="buA" type="primary" @click="submitForm('ruleForm')">注册提交</el-button>
          <el-button class="buB" @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
      </el-form>
      </div>
    </div>
 </div>   
</template>

<script>


export default {
  data() {
    var validateAccount = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("账号不能为空"));
      } else {
         callback();
      }
    };
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.ruleForm.password) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      ruleForm: {
        email: "",  
        password: "",
        passwordS: "",
      },
      rules: {
        email: [{ validator: validateAccount, trigger: "blur" }],
        password: [{ validator: validatePass, trigger: "blur" }],
        passwordS: [{ validator: validatePass2, trigger: "blur" }],
      },
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
           this.tiao()
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    goBack(){
      this.$router.go(-1)
    },
   /*proxy: {
      '/api':{
        target: 'http://127.0.0.1:8085/',
        secure: false,
        changOrigin: true,
        pathRewrite: {
          '^/api': '/'
        }
      }
    }*/
    tiao(){
          //  sessionStorage.setItem("tmember",JSON.stringify(Response.data))
           this.$router.push("/Checkitembg");
        // axios.get("http://127.0.0.1:8085/TMemberControlle/loginA?email="+this.ruleForm.email+"&password="+this.ruleForm.password).then(Response =>{
         //发送异步
          //  sessionStorage.setItem("tmember",JSON.stringify(Response.data))
          //   if (sessionStorage.getItem('tmember')) {
          // } else {
          //   console.log("账号冻结");
          //  }
       // })
    }
  }
}
</script>

<style scoped>
  .xq {
    background-color: black;
    color: aliceblue;

    text-align: center;
    height: 40px;
  }
  .dlA{
    position: relative;
    top: 50px;
  }
  .loginClass{
    border-radius: 15px;
    background-color: darkorchid;
    background-clip: padding-box;
    margin: 130px auto;
    width: 50%;
    height: 500px;
    padding: 35px 35px 15px 35px;
    background-color: rgb(244, 244, 243);
    position: relative;
    left: 0px;
    border: 1px solid gainsboro;
    box-shadow: 0 0 30px gainsboro;
  }
  .el-button {
    boerder-radius: 30px;
  }
  .buA{
    position: relative;
    top: 120px;
    width: 600px;
    left: -30px;
  }
  .buB{
    position: relative;
    top: 0px;
    width: 600px;
    left: -37px;
    background-color: rgb(248, 235, 246);
    
  }
</style> 
